<template>
  <div class="pageContainer addFriendContainer flex-column">
    <header-tabs :tabs="tabs"></header-tabs>
    <div class="routeContent flex-row autoGrow">
      <choose-service-account
        @serviceChange="serviceChange"
        ref="chooseServiceAccount"
        :multiple="false" >
        <div class="friendRoute flex-column autoGrow">
          <div class="verifyCount" v-if="!isVerify">
            今日已发送好友验证数：{{verifyCount}}
          </div>
          <div class="verifyInterval">
            <p  v-if="!isVerify">发送好友验证间隔时间（秒钟）</p>
            <p  v-else>通过好友验证间隔时间（秒钟）</p>
            <div class="intervalTime flex-row">
              <input type="tel" class="layui-input" v-model="minSecond">
              <div class="layui-form-mid">-</div>
              <input type="tel" class="layui-input" v-model="maxSecond">
              <button class="recommendVal layui-btn layui-btn-normal layui-btn-sm" @click="setRecommendValue">推荐值</button>
            </div>
          </div>
          <div class="maxCount"  v-if="!isVerify">
            <p>每日发送好友验证上限</p>
            <el-slider class="count-slider" @input="changeMaxCount" :show-tooltip="true" :value="Math.min(maxCount,maxCountSetting)" :min="1" :max="maxCountSetting"></el-slider>
            <div class="flex-row">
              <input type="number"
                class="layui-input"
                :value="maxCount"
                @change="changeMaxCount">
              <span>人（超过{{maxCountSetting}}次可能会造成封号）</span>
            </div>
          </div>
          <div class="verifyInfo"  v-if="!isVerify">
            <p class="itemTitle">验证信息</p>
            <input type="text" class="layui-input" v-model="verifyInfo">
          </div>
          <p class="itemTitle" v-if="!isVerify">休眠时间</p>
          <div class="flex-row sleepTime" v-if="!isVerify">
            <input type="tel" class="layui-input" id="startTime">
            <div class="layui-form-mid">-</div>
            <input type="tel" class="layui-input" id="endTime">
          </div>
          <div class="tips operateTip" v-if="!isVerify">
            注：每日好友添加到上限后（上限根据微信规则而定，可能会动态调整），次日可继续添加，请根据你的实际情况调整添加人数，发送的过多，对方不一定能收到。
          </div>
          <div v-if="isVerify">
            <div style="margin-top:10px"><label><input :checked="autoVerify" type="checkbox" @change="verifyChange"> 开启自动通过验证</label></div>
            <div style="margin-top:10px"><button @click="setVerifySetting" class="recommendVal layui-btn layui-btn-normal layui-btn-sm">保存设置</button></div>
          </div>
        </div>
      </choose-service-account>
      <router-view @getSetting="getVerifySetting" :autoVerify="autoVerify" :params="params"></router-view>
    </div>
  </div>
</template>
<script>
import HeaderTabs from '@/components/headerTabs';
import ChooseServiceAccount from '@/components/chooseServiceAccount';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      laydate: null,
      isVerify: false,
      verifyCount: 0,
      services: null,
      showSettingDialog: false,
      minSecond: 120,
      maxSecond: 240,
      maxCountSetting:30,
      maxCount: 0,
      slide: null,
      sleepFrom: '',
      sleepTo: '',
      verifyInfo: '',
      hasSetting: false,
      settingId: '',
      tabs: [
        {
          route: 'friend',
          label: '添加好友',
          name: 'Friend'
        },
        {
          route: 'group',
          label: '添加群好友',
          name: 'Group'
        },
        {
          route: 'verify',
          label: '好友验证',
          name: 'Verify'
        }
      ],
      autoVerify:false
    }
  },
  created() {
    this.isVerify =  this.$route.name == 'Verify' ? true : false
  },
  updated () {
    this.isVerify =  this.$route.name == 'Verify' ? true : false
  },
  mounted() {
    const vm = this;
    layui.use([ 'laydate'], ()=>{
      const laydate = layui.laydate
      this.laydate = layui.laydate
      laydate.render({
        elem: '#startTime',
        trigger: 'click',
        type: 'time',
        lang: 'cn',
        min: 0,
        done(val) {
          vm.sleepFrom = val
        }
      })
      laydate.render({
        elem: '#endTime',
        trigger: 'click',
        type: 'time',
        lang: 'cn',
        min: 0,
        done(val) {
          vm.sleepTo = val
        }
      })

    })
  },
  watch:{
    $route(to,from){
      if(to.name!==from.name){
        this.$refs['chooseServiceAccount'].clear()
      }
    }
  },
  components: {
    HeaderTabs,
    ChooseServiceAccount
  },
  methods: {
    go(route) {
      this.$router.push(route)
    },
    setRecommendValue() {
      this.minSecond = 10
      this.maxSecond = 30
    },
    oepnSendSetting() {
      const that = this;
      this.showSettingDialog = true;
      this.$nextTick(()=>{
        layui.use('laydate', function(){
          const laydate = layui.laydate
          laydate.render({
            elem: '#startTime',
            trigger: 'click',
            type: 'time',
            lang: 'cn',
            min: 0,
            done(val) {
              that.sleepFrom = val
            }
          })
          laydate.render({
            elem: '#endTime',
            trigger: 'click',
            type: 'time',
            lang: 'cn',
            min: 0,
            done(val) {
              that.sleepTo = val
            }
          })
        })
      })
    },
    submitSetting() {
    },
    changeMaxCount(e) {
      const count = e.target?+e.target.value:+e;
      if (count > this.maxCountSetting) {
        this.$msg(`每日添加好友上限为${this.maxCountSetting}人,可能会造成封号`)
      } else if (count <= 0){
        this.$msg('每日添加好友上限不能小于等于0')
      }
      console.log(count)
      this.maxCount = count
      //this.slide.setValue(e.target.value)
    },
    serviceChange(services) {
      this.services = services

      if (!this.isVerify) {
        const service = this.services[0]
        if (service) {
          this.initSetting(service)
        }
      }
    },
    initSetting(service) {
      this.$api.friend.getInviteSetting({
        csid: service.csid,
        wxaccountid: service.wxid
      }).then(data=>{
        if (this.isObject(data)&&Object.keys(data).length) {
          this.settingId = data.id
          this.minSecond = data.intervalstart || ''
          this.maxSecond = data.intervalend || ''
          this.verifyInfo = data.validationmsg || '我是'+service.nick
          this.verifyCount = data.sendCount||0
          this.maxCount = data.daylimit || 0
          this.sleepFrom = data.sleepstart || '00:00:00'
          this.sleepTo = data.sleepend || '07:00:00'
          if (this.sleepFrom) {
            this.laydate.render({
              elem: '#startTime',
              trigger: 'click',
              value: this.sleepFrom,
              type: 'time',
              lang: 'cn',
              min: 0,
              done(val) {
                vm.sleepFrom = val
              }
            })
          }
          if (this.sleepTo) {
            this.laydate.render({
              elem: '#endTime',
              value: this.sleepTo,
              trigger: 'click',
              type: 'time',
              lang: 'cn',
              min: 0,
              done(val) {
                vm.sleepTo = val
              }
            })
          }
        }
      }).catch(e=>this.$msg(e))
    },
    verifyChange(){
      this.autoVerify = !this.autoVerify
    },
    setVerifySetting(){
      const csid = this.uistate.adminid
      if(!csid)return;
      const params = {
        wxAccount:this.services[0].wxid,
        autoPass:this.autoVerify?1:0,
        sleepStart:this.minSecond||120, sleepEnd :this.maxSecond||240
      }
      if(this.maxSecond<this.minSecond){
        return this.$msg('间隔时间设置错误')
      }
      // csId, autoPass:0：手动 1 自动, sleepStart, sleepEnd
      this.$api.validation.insertSetting(params)
        .then(data=>{
          this.$msg('设置更改成功')
        })
        .catch(e=>this.$msg(e))
    },
    getVerifySetting(data){
      if(this.isVerify){
        this.minSecond = data.sleepstart
        this.maxSecond = data.sleepend
        this.autoVerify = data.autopass
      }
      console.log(data)
    }
  },
  computed: {
    ...mapState(['uistate']),
    params() {
      return {
        settingId: this.settingId,
        minSecond: this.minSecond,
        maxSecond: this.maxSecond,
        maxCount: this.maxCount,
        verifyInfo: this.verifyInfo,
        sleepFrom: this.sleepFrom,
        sleepTo: this.sleepTo,
        services: this.services,
        verifyCount: this.verifyCount

      }
    }
  }
}
</script>

<style scoped>
.count-slider >>> .el-slider__runway{
  background: #ccc
}

</style>
